<template>
  <div class="common-layout h-full">
    <el-container class="h-full">
      <el-aside width="200px">
        <!-- 侧边栏 -->
        <Menu></Menu>
      </el-aside>
      <el-container>
        <el-header class="mb-[20px]">
          <div>
            <!-- 面包屑 -->
            <breadcrumb></breadcrumb>
          </div>
          <div>
            <!-- 头部选项卡 -->
            <tabs></tabs>
          </div>
        </el-header>
        <el-main>
          <isFind></isFind>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import Menu from "@/components/Menu.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import tabs from "@/components/tabs.vue";
import { provide } from "vue";

const open = (imgs) => {
  ElMessageBox.alert(`<strong>${imgs}</strong>`, "商品详情", {
    dangerouslyUseHTMLString: true,
    closeOnClickModal: true,
    showConfirmButton: false,
    customStyle: {
      textAlign: "center",
    },
  });
};
provide("openEvent", open);
</script>
<style scoped lang="scss">
</style>
